<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="referrer" content="no-referrer" />
    <title>捷阅网商户主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- bootstrap-css -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/bootstrap.min.css}" >
    <!-- //bootstrap-css -->
    <!-- Custom CSS -->
    <link th:href="@{/lib/merchant/css/style.css}" rel='stylesheet' type='text/css' />
    <link th:href="@{/lib/merchant/css/style-responsive.css}" rel="stylesheet"/>
    <!-- font CSS -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <!-- font-awesome icons -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/font.css}" type="text/css"/>
    <link th:href="@{/lib/merchant/css/font-awesome.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/lib/merchant/css/morris.css}" type="text/css"/>
    <!-- calendar -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/monthly.css}">
    <!-- //calendar -->
    <!-- //font-awesome icons -->
    <script th:src="@{/lib/merchant/js/jquery2.0.3.min.js}"></script>
    <script th:src="@{/lib/merchant/js/raphael-min.js}"></script>
    <script th:src="@{/lib/merchant/js/morris.js}"></script>
</head>
<body>
<section id="container">
    <!--header start-->
    <header class="header fixed-top clearfix" th:include="merchant/common/model::header"></header>
    <!--header end-->
    <!--sidebar start-->
    <aside  th:include="merchant/common/model::aside"></aside>
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <!-- //market-->
            <div class="market-updates">
                <div class="col-md-3 market-update-gd">
                    <div class="market-update-block clr-block-3">
                        <div class="col-md-4 market-update-right">
                            <i class="fa fa-usd"></i>
                        </div>
                        <div class="col-md-8 market-update-left">
                            <h4>总盈利</h4>
                            <h3>￥[[${profit}]]</h3>
                            <p>本店铺的总盈利</p>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="col-md-3 market-update-gd">
                    <div class="market-update-block clr-block-2">
                        <div class="col-md-4 market-update-right">
                            <i class="fa fa-eye"> </i>
                        </div>
                        <div class="col-md-8 market-update-left">
                            <h4>评论总数</h4>
                            <h3>[[${commentCount}]]</h3>
                            <p>本店商品的总评论条数</p>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="col-md-3 market-update-gd">
                    <div class="market-update-block clr-block-1">
                        <div class="col-md-4 market-update-right">
                            <i class="fa fa-users" ></i>
                        </div>
                        <div class="col-md-8 market-update-left">
                            <h4>会员总数</h4>
                            <h3>[[${userCount}]]</h3>
                            <p>本店铺的会员总数</p>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="col-md-3 market-update-gd">
                    <div class="market-update-block clr-block-4">
                        <div class="col-md-4 market-update-right">
                            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                        </div>
                        <div class="col-md-8 market-update-left">
                            <h4>成交量</h4>
                            <h3>[[${orderCount}]]</h3>
                            <p>本店铺总成交数量</p>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
            <!-- //market-->
            <!-- tasks -->
            <div class="agile-last-grids">
                <div class="col-md-4 agile-last-left">
                    <div class="agile-last-grid">
                        <div class="area-grids-heading">
                            <h3>月盈利</h3>
                        </div>
                        <div id="graph7"></div>
                        <script>
                            // This crosses a DST boundary in the UK.
                            Morris.Area({
                                element: 'graph7',
                                data: [
                                    {x: '2013-03-30 22:00:00', y: 3, z: 3},
                                    {x: '2013-03-31 00:00:00', y: 2, z: 0},
                                    {x: '2013-03-31 02:00:00', y: 0, z: 2},
                                    {x: '2013-03-31 04:00:00', y: 4, z: 4}
                                ],
                                xkey: 'x',
                                ykeys: ['y', 'z'],
                                labels: ['Y', 'Z']
                            });
                        </script>

                    </div>
                </div>
                <div class="col-md-4 agile-last-left agile-last-middle">
                    <div class="agile-last-grid">
                        <div class="area-grids-heading">
                            <h3>日盈利</h3>
                        </div>
                        <div id="graph8"></div>
                        <script>
                            /* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
                            var day_data = [
                                {"period": "2016-10-01", "licensed": 3407, "sorned": 660},
                                {"period": "2016-09-30", "licensed": 3351, "sorned": 629},
                                {"period": "2016-09-29", "licensed": 3269, "sorned": 618},
                                {"period": "2016-09-20", "licensed": 3246, "sorned": 661},
                                {"period": "2016-09-19", "licensed": 3257, "sorned": 667},
                                {"period": "2016-09-18", "licensed": 3248, "sorned": 627},
                                {"period": "2016-09-17", "licensed": 3171, "sorned": 660},
                                {"period": "2016-09-16", "licensed": 3171, "sorned": 676},
                                {"period": "2016-09-15", "licensed": 3201, "sorned": 656},
                                {"period": "2016-09-10", "licensed": 3215, "sorned": 622}
                            ];
                            Morris.Bar({
                                element: 'graph8',
                                data: day_data,
                                xkey: 'period',
                                ykeys: ['licensed', 'sorned'],
                                labels: ['Licensed', 'SORN'],
                                xLabelAngle: 60
                            });
                        </script>
                    </div>
                </div>
                <div class="col-md-4 agile-last-left agile-last-right">
                    <div class="agile-last-grid">
                        <div class="area-grids-heading">
                            <h3>年盈利</h3>
                        </div>
                        <div id="graph9"></div>
                        <script>
                            var day_data = [
                                {"elapsed": "I", "value": 34},
                                {"elapsed": "II", "value": 24},
                                {"elapsed": "III", "value": 3},
                                {"elapsed": "IV", "value": 12},
                                {"elapsed": "V", "value": 13},
                                {"elapsed": "VI", "value": 22},
                                {"elapsed": "VII", "value": 5},
                                {"elapsed": "VIII", "value": 26},
                                {"elapsed": "IX", "value": 12},
                                {"elapsed": "X", "value": 19}
                            ];
                            Morris.Line({
                                element: 'graph9',
                                data: day_data,
                                xkey: 'elapsed',
                                ykeys: ['value'],
                                labels: ['value'],
                                parseTime: false
                            });
                        </script>

                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </section>
        <!-- footer -->
        <div class="footer">
            <div class="wthree-copyright">
                <p>Copyright &copy; 2020.JIEYUE All rights reserved.</p>
            </div>
        </div>
        <!-- / footer -->
    </section>
    <!--main content end-->
</section>
<script th:src="@{/lib/merchant/js/bootstrap.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{/lib/merchant/js/scripts.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.slimscroll.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.nicescroll.js}"></script>
<script type="text/javascript" th:src="@{/lib/merchant/js/flot-chart/excanvas.min.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.scrollTo.js}"></script>
<!-- morris JavaScript -->
<script>
    $(document).ready(function() {
        //BOX BUTTON SHOW AND CLOSE
        jQuery('.small-graph-box').hover(function() {
            jQuery(this).find('.box-button').fadeIn('fast');
        }, function() {
            jQuery(this).find('.box-button').fadeOut('fast');
        });
        jQuery('.small-graph-box .box-close').click(function() {
            jQuery(this).closest('.small-graph-box').fadeOut(200);
            return false;
        });

        //CHARTS
        function gd(year, day, month) {
            return new Date(year, month - 1, day).getTime();
        }

        graphArea2 = Morris.Area({
            element: 'hero-area',
            padding: 10,
            behaveLikeLine: true,
            gridEnabled: false,
            gridLineColor: '#dddddd',
            axes: true,
            resize: true,
            smooth:true,
            pointSize: 0,
            lineWidth: 0,
            fillOpacity:0.85,
            data: [
                {period: '2015 Q1', iphone: 2668, ipad: null, itouch: 2649},
                {period: '2015 Q2', iphone: 15780, ipad: 13799, itouch: 12051},
                {period: '2015 Q3', iphone: 12920, ipad: 10975, itouch: 9910},
                {period: '2015 Q4', iphone: 8770, ipad: 6600, itouch: 6695},
                {period: '2016 Q1', iphone: 10820, ipad: 10924, itouch: 12300},
                {period: '2016 Q2', iphone: 9680, ipad: 9010, itouch: 7891},
                {period: '2016 Q3', iphone: 4830, ipad: 3805, itouch: 1598},
                {period: '2016 Q4', iphone: 15083, ipad: 8977, itouch: 5185},
                {period: '2017 Q1', iphone: 10697, ipad: 4470, itouch: 2038},

            ],
            lineColors:['#eb6f6f','#926383','#eb6f6f'],
            xkey: 'period',
            redraw: true,
            ykeys: ['iphone', 'ipad', 'itouch'],
            labels: ['All Visitors', 'Returning Visitors', 'Unique Visitors'],
            pointSize: 2,
            hideHover: 'auto',
            resize: true
        });


    });
</script>
<!-- calendar -->
<script type="text/javascript" th:src="@{/lib/merchant/js/monthly.js}"></script>
<script type="text/javascript">
    $(window).load( function() {

        $('#mycalendar').monthly({
            mode: 'event',

        });

        $('#mycalendar2').monthly({
            mode: 'picker',
            target: '#mytarget',
            setWidth: '250px',
            startHidden: true,
            showTrigger: '#mytarget',
            stylePast: true,
            disablePast: true
        });

        switch(window.location.protocol) {
            case 'http:':
            case 'https:':
                // running on a server, should be good.
                break;
            case 'file:':
        }

    });
</script>
<script th:include="merchant/common/model :: alertMsg"></script>

<!-- //calendar -->
</body>
</html>
